<template>
  <view class="ui-grid-item" :style="itemStyle">
    <view class="ui-grid-item--box">
      <slot name="content" v-if="$slots.content"></slot>
      <uiIcon></uiIcon>
      <text>{{text}}</text>
    </view>
  </view>
</template>
<script>
import uiIcon from "@/components/base/icon/index.vue";
export default {
  name: "uiGridItem",

  props: {
    text: {
      type: String,
      default: ""
    }
  },
  components: {
    uiIcon
  },
  data() {
    return {};
  },
  mounted() {
    console.log(this.$slots);
  },

  computed: {
    itemStyle() {
      const { square, columnNum, gutter } = this.$parent;

      const percent = `${100 / columnNum}%`;
      const itemStyle = {
        // width: '20%',
        color: "red"
      };
      // if (square) {
      //   style.paddingTop = percent;
      // } else if (gutter) {
      //   style.paddingRight = `${gutter}rpx`;

      //   if (this.index >= columnNum) {
      //     style.marginTop = `${gutter}rpx`;
      //   }
      // }
      console.log(itemStyle);
      return itemStyle;
    }
  },
  methods: {}
};
</script>

<style lang="scss">
</style>
